<template>
    <div class="cms">
        <div class="cms-sidebar">
            <el-menu
                    router
                    :default-active="activeIndex"
                    background-color="#515a6e"
                    text-color="#dddddd"
                    active-text-color="#ffffff">
                <el-menu-item index="/cms/article">
                    <i class="el-icon-menu"></i>
                    <span slot="title">文章管理</span>
                </el-menu-item>
                <el-menu-item index="/cms/catalog">
                    <i class="el-icon-document"></i>
                    <span slot="title">栏目管理</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="cms-detailed">
            <router-view></router-view>
            <el-backtop target=".el-table__body-wrapper">
                <i style="color: #2d8cf0" class="el-icon-top"></i>
            </el-backtop>
        </div>
    </div>
</template>

<script>

  export default {
    name: "Cms",
    data () {
      return {
        activeIndex: ""
      }
    },
    methods: {
    },
    created () {
    }
  }
</script>

<style>
    .cms {
        width: 100%;
        height: 100%;
        border-bottom: #cccccc 1px solid;
        float: left;
    }

    .cms-sidebar {
        width: 200px;
        height: 100%;
        background-color: #515a6e;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .cms-detailed {
        padding: 5px;
        width: calc(100% - 210px);
        height: calc(100% - 10px);
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* iview样式重写 */
    .el-menu {
        border: none;
        user-select: none;
    }

    .cms-sidebar > .el-menu {
        border: none;
    }

    .cms-sidebar > .el-menu > .is-active {
        border-left: #5cadff 5px solid;
        border-right: none;
        color: #fff;
        background: #6f83a2 !important;
    }

    .cms-sidebar > .el-menu > .el-menu-item {
        height: 50px;
        line-height: 50px;
    }

    /*子模版样式*/
    .cms-menu {
        width: 100%;
        height: 100%;
    }

    /* element ui样式重写 */
    .cms-menu > .el-table {
        height: calc(100% - 35px) !important;
    }

    .cms-menu > .el-table > .el-table__body-wrapper {
        height: calc(100% - 35px) !important;
    }

</style>
